<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doId(){
            var div=window.document.getElementById("mydiv");//根据id的值来获取元素的DOM对象,返回的是id为mydiv的第一个DOM对象
            console.log(div);

        }
        function doDivText(){
            var div=document.getElementById("mydiv");
            // DOM对象.innerHTML  获取元素内的内容
            // DOM对象.innerHTML=值  设置元素内的内容
            // console.log(div.innerHTML);//获取内容
            div.innerHTML="哈哈，我改变了你的内容";//改变标签中的内容
        }
        function doName(){
            var inputs=document.getElementsByName("hobby");//根据name的属性值来获取元素的DOM对象的集合
            console.log(inputs);//集合
            // console.log(inputs[0]);//第一个DOM对象
            // console.log(inputs[1]);//第二个DOM对象
            // console.log(inputs[2]);//第三个DOM对象

            for(var i=0;i<inputs.length;i++){
                console.log(inputs[i]);//DOM对象
            }
        }

        function doTagName(){
            var divs=document.getElementsByTagName("input");//根据标签名的值来获取元素的DOM对象的集合
            // console.log(divs);//集合
            for(var i=0;i<divs.length;i++){
                console.log(divs[i]);//DOM对象
            }
        }

        function doInput(){
           var input=document.getElementById("username");//DOM对象
            // DOM对象.value      获取value
            // DOM对象.value=值   设置value
            // console.log(input.value);//获取value值
            input.value="陈鑫宇";//设置value值

            // var inputs=document.getElementsByTagName("input");//集合
            // var last=inputs[inputs.length-1];
            // // DOM对象.value      获取value
            // // DOM对象.value=值   设置value
            // // console.log(last.value);
            // last.value="王紫薇";
        }

        function doClassName(){
            var ps=document.getElementsByClassName("heihei");//集合
            console.log(ps);
            console.log(ps[0]);

        }
    </script>
</head>
<body>
    <input type="button" value="根据id属性的值获取div元素的DOM对象" onclick="doId()">
    <input type="button" value="改变div中的文本内容" onclick="doDivText()">
    <input type="button" value="根据name属性的值来获取元素的DOM对象的集合" onclick="doName()">
    <input type="button" value="根据标签名的值来获取元素的DOM对象的集合" onclick="doTagName()">
    <input type="button" value="根据class的值来获取元素的DOM对象的集合" onclick="doClassName()">
    <input type="button" value="改变input中的value值" onclick="doInput()">
    <div id="mydiv">第一个div</div> 
    <div id="mydiv2">第二个div</div>
    <input type="checkbox" name="hobby" value="吃饭">吃饭
    <input type="checkbox" name="hobby" value="睡觉">睡觉
    <input type="checkbox" name="hobby" value="出去旅游">旅游
    <input type="text" id="username" value="王宝强">
    <p class="hi">p01</p>
    <p class="heihei">p02</p>
    <p class="heihei">p03</p>
    <p class="heihei">p04</p>

</body>
</html>